/******************************************************************************
* File description: MethodStep.qml
* Function: 扩增程序-步骤配置
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-09-02
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Item {
    id: root

    /* property 定义开始 */
    property bool isMarked: false
    property int sliderHandleYPos: 0
    property string stepNum: "1" // 步骤号

    // 私有
    property int _labelFontSize: 14

    // 函数
    // 修改多边形左上角距离
    function changePolyLeftPoint(point) {
        polygon._polygonLeftTopPointPos = point
        polygon.requestPaint()
    }

    // 修改多边形右上角距离
    function changePolyRightPoint(point) {
        polygon._polygonRightTopPointPos = point
        polygon.requestPaint()
    }

    /* property 定义结束 */

    implicitWidth: 156

    // 容器
    Rectangle {
        id: stepContainer

        width: 156
        height: parent.height
        anchors {
            top: parent.top
            bottom: parent.bottom
        }

        ColumnLayout {
            anchors {
                topMargin: 55
                fill: parent
            }
            spacing: 0

            // 滑块和多边形部分
            Item {
                id: polygonNSliderContainer
                Layout.fillWidth: true
                Layout.fillHeight: true

                // 左侧多边形
                Canvas {
                    id: polygon

                    // 多边形左侧高度
                    property int _polygonLeftTopPointPos: parent.height / 5 * 4
                    // 多边形右侧高度
                    property int _polygonRightTopPointPos: 60

                    anchors {
                        fill: parent
                        rightMargin: parent.width / 2
                    }
                    antialiasing: true
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.strokeStyle = "#7dc8ff"
                        ctx.fillStyle = "#7dc8ff"
                        ctx.lineWidth = 1
                        ctx.clearRect(0, 0, width, height)
                        ctx.beginPath()
                        ctx.moveTo(0, height)
                        ctx.lineTo(width, height)
                        ctx.lineTo(width, polygon._polygonRightTopPointPos)
                        ctx.lineTo(0, polygon._polygonLeftTopPointPos)
                        ctx.closePath()
                        ctx.fill()
                    }
                }

                // 右侧滑块
                Item {
                    id: sliderContainer
                    anchors {
                        fill: parent
                        leftMargin: parent.width / 2
                    }

                    // 滑块
                    Slider {
                        id: slider
                        anchors {
                            fill: parent
                        }
                        orientation: Qt.Vertical
                        stepSize: 0.001

                        background: Rectangle {
                            implicitWidth: slider.width
                            implicitHeight: slider.height
                            width: implicitWidth
                            height: slider.availableHeight
                            color: "transparent"

                            Rectangle {
                                width: parent.width
                                height: slider.position * parent.height
                                y: slider.visualPosition * parent.height + handle.implicitHeight - 3
                                color: "#7dc8ff"
                            }
                        }

                        handle: Rectangle {
                            id: handle
                            implicitWidth: 20
                            implicitHeight: 15
                            x: slider.width / 2 - width / 2
                            y: slider.visualPosition * slider.availableHeight + height / 2
                            color: "#8080ff"
                            border.width: 0

                            onYChanged: {
                                // 多边形右侧变化
                                root.changePolyRightPoint(handle.y + handle.height / 2 - 2)
                                root.sliderHandleYPos = handle.y + handle.height / 2 - 2
                            }
                        }

                        Component.onCompleted: {
                            slider.value = 0.16
                        }
                    }

                    // 文字
                    Item {
                        id: textContainer
                        width: parent.width
                        height: implicitHeight
                        y: root.sliderHandleYPos

                        // 温度
                        Item {
                            id: tempContainer
                            y: -25

                            MethodStepInput {
                                id: tempInput
                                x: parent.width / 2 + implicitHeight / 2
                                y: -implicitHeight / 2
                                inputText: parseFloat(slider.value * 100).toFixed(1).toString()
                                validator: RegExpValidator {
                                    regExp: /^[1-9]{1}\d{1}(.\d{1})?$/
                                }

                                onTextEdited: {
                                    if(text === "") text = "16.0"
                                    slider.value = parseFloat(text).toFixed(1) / 100
                                }

                                onActiveFocusChanged: {
                                    if(activeFocus){

                                    }
                                }
                            }

                            Label {
                                x: tempInput.x + tempInput.width + 3
                                y: tempInput.y
                                text: "℃"
                                font.pixelSize: _labelFontSize
                            }
                        }

                        // 升温速率
                        Item {
                            id: rateContainer
                            x: -(parent.width - implicitWidth) / 1.5
                            y: -7.5

                            MethodStepInput {
                                id: rateInput
                                width: 30
                                x: 0
                                y: -implicitHeight / 2
                                inputText: "16"
                            }

                            Label {
                                x: rateInput.x + rateInput.width + 3
                                y: rateInput.y
                                text: "℃/s"
                                font.pixelSize: _labelFontSize
                            }
                        }

                        // 持续时间
                        Item {
                            id: timeContainer
                            y: -50
                            x: -parent.width + 5

                            // 分钟
                            MethodStepInput {
                                id: minuteTextInput
                                width: 30
                                x: 0
                                y: -implicitHeight / 2
                                inputText: "5"
                            }
                            Label {
                                id: minuteLabel
                                x: minuteTextInput.width + 2
                                y: minuteTextInput.y
                                text: "分:"
                                font.pixelSize: _labelFontSize
                            }
                            // 秒
                            MethodStepInput {
                                id: secondTextInput
                                width: 30
                                x: minuteLabel.x + minuteLabel.width + 2
                                y: minuteTextInput.y
                                inputText: "30"
                            }
                            Label {
                                x: secondTextInput.x + secondTextInput.width + 2
                                y: minuteTextInput.y
                                text: "秒"
                                font.pixelSize: _labelFontSize
                            }
                        }

                        // 荧光标记
                        Rectangle {
                            width: 20
                            height: 20
                            x: parent.width - width
                            y: -7.5
                            color: isMarked ? "#FF0000" : "lightgray"

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    root.isMarked = !root.isMarked
                                    forceActiveFocus()
                                }
                            }
                        }
                    }
                }

                z: 999
            }

            // 添加按钮和显示文字部分
            Rectangle {
                id: addBtnNStepTextContainer
                Layout.fillWidth: true
                Layout.preferredHeight: 60
                color: "#7dc8ff"
                border.width: 0

                ColumnLayout {
                    anchors.fill: parent
                    spacing: 0

                    CustomVerSpacerItem {}

                    // 按钮部分
                    Item {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 20

                        RowLayout {
                            anchors.fill: parent

                            CustomHorSpacerItem {}

                            MethodStepButton {}

                            CustomHorSpacerItem {}

                            MethodStepButton {}

                            CustomHorSpacerItem {}

                            MethodStepButton {}

                            CustomHorSpacerItem {}
                        }
                    }

                    // 文字部分
                    Label {
                        Layout.fillWidth: true
                        horizontalAlignment: Text.AlignHCenter
                        text: "步骤" + root.stepNum
                    }
                }
            }
        }
    }
}
